/* eslint-disable react/prop-types */
import { Button, Checkbox, Flex, Form, Typography } from "antd"
import { useCallback, useEffect } from "react"

import { queryMemberInfoEdit } from "@/api/member"
import { IAccountStatusAfter, IModalContent } from "@/api/member/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export const AccountStatusModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage } = useLocale()

	const submit = useCallback(
		async (value: IAccountStatusAfter) => {
			const body = {
				accountStatusAfter: {
					gameLockStatus: value.gameLockStatus ? 1 : 0,
					loginLockStatus: value.loginLockStatus ? 1 : 0,
					paymentLockStatus: value.paymentLockStatus ? 1 : 0,
					remark: value.remark
				},
				merchantId: filterInfo.merchantId,
				userId: filterInfo.userId,
				userName: filterInfo.username
			}
			const [err] = await queryMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)
	const [form] = Form.useForm()

	useEffect(() => {
		if (userInfo) {
			form.setFieldsValue({
				gameLockStatus: userInfo.gameLockStatus === 1,
				loginLockStatus: userInfo.loginLockStatus === 1,
				paymentLockStatus: userInfo.paymentLockStatus === 1
			})
		}
	}, [userInfo])

	const { loading } = useApi()

	const isDisabledCheckBoxs = userInfo.liquidationStatus === 1 || userInfo.liquidationStatus === 2

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form
					style={{ width: "100%" }}
					form={form}
					onFinish={submit}
					initialValues={{
						gameLockStatus: userInfo.gameLockStatus === 1,
						loginLockStatus: userInfo.loginLockStatus === 1,
						paymentLockStatus: userInfo.paymentLockStatus === 1,
						remark: ""
					}}
				>
					<Flex gap={10} className="title-first">
						<Typography className="account-status">
							{formatMessage({ id: "member.button_permissions.accountStatus" })}:
						</Typography>
						<Flex gap={40}>
							<Form.Item name="loginLockStatus" valuePropName="checked">
								<Checkbox disabled={isDisabledCheckBoxs}>
									{formatMessage({ id: "member.edit_user.account_status.login_lock" })}
								</Checkbox>
							</Form.Item>
							<Form.Item name="gameLockStatus" valuePropName="checked">
								<Checkbox>{formatMessage({ id: "member.edit_user.account_status.game_lock" })}</Checkbox>
							</Form.Item>
							<Form.Item name="paymentLockStatus" valuePropName="checked">
								<Checkbox disabled={isDisabledCheckBoxs}>
									{formatMessage({ id: "member.edit_user.account_status.deposit_and_withdrawal_lock" })}
								</Checkbox>
							</Form.Item>
						</Flex>
					</Flex>
					<CustomTextArea
						normalize={(value: string) => {
							return value.replace(" ", "")
						}}
						placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
						name="remark"
						label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
					/>

					<Flex justify="center" wrap="wrap" gap={10}>
						<Button
							key="back"
							onClick={() => {
								handleCancel()
								form.resetFields()
							}}
						>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button htmlType="submit" type="primary" loading={loading}>
							{formatMessage({ id: "common.sure" })}
						</Button>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
